// 消息模板
<template>
  <div class="containerBox">
    <cusCard>
      <div class="searchBox">
        <el-form :model="messageForm" :inline="true">
          <el-form-item label="消息类型">
            <el-select v-model="messageForm.msgType" placeholder="请选择类型">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="messageForm.header" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>

      </div>
    </cusCard>
    <cusCard class="cmt-16">
      <cusButton color="#0052D9" @click="addHandler('add')">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="messageTableData" :tableColumns="tableColumns" @changeCol="changeCol" @changeRow="changeRow"
        :loading="loading" :height="460" :showSelect="false">

        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="lookDetail(row)">详情
          </cusButton>

        </template>
      </cusTable>

      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>
    <msgTemplate ref="msgTemplateRef"></msgTemplate>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import msgTemplate from "./components/msgTemplate.vue";
const router = useRouter();

const formOrigin = () => ({
  sampleTime: [],
  deviceId: '',
});

const messageForm = ref(formOrigin());
const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

const searchHandler = () => {

};
// 重置查询
const resetHandler = () => {
  messageForm.value = formOrigin();
  pageObj.value = pageInit();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
};

// 表格列数据
const tableColumns = reactive([
  { label: "AppID", prop: "gmtKeep", width: "180", },
  { label: "模板ID", prop: "gmtKeep", width: "180", },
  { label: "标题", prop: "gmtKeep", width: "180", },
  { label: "所属行业", prop: "gmtKeep", width: "180", },
  { label: "模板内容", prop: "gmtKeep", width: "180", },
  { label: "消息类型", prop: "gmtKeep", width: "180", },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "180",
    fixed: "right",
  },
]);

const messageTableData = ref([])

const msgTemplateRef = ref(null);
const addHandler = () => {
  // msgTemplateRef.value.showHandler();
  router.push('/deviceTable')
};


</script>

<style lang="scss" scoped></style>